<template>
  <!--常用信息-->
  <div class="guibinting changyong">
    <wv-tabs v-model="activeIndex" class="container" @click="showInfo(activeIndex)">
      <wv-tab title="旅客">
        <ul class="lvkelist">
          <li v-for="item in privatedataList" @click="goEditLvke(item)">
            <p>{{item.userName}} <span v-if="item.isOneself==1">本人</span></p>
            <p v-if="item.identityType==1">身份证号：{{item.identityNo}}</p>
            <p v-if="item.identityType==2">护照号：{{item.identityNo}}</p>
            <p v-if="item.identityType==3">港澳通行证号：{{item.identityNo}}</p>
            <p v-if="item.identityType==4">台胞证号：{{item.identityNo}}</p>
          </li>
        </ul>
      </wv-tab>
      <wv-tab title="地址">
        <ul class="lvkelist">
          <li v-for="item in addressList" @click="goEditAddress(item)">
            <p>{{item.userName}}</p>
            <p>{{item.area}}{{item.addressInfo}}</p>
          </li>
        </ul>
      </wv-tab>
      <wv-tab title="联系人">
        <ul class="lvkelist">
          <li v-for="item in contactsList" @click="goEditContacts(item)">
            <p>{{item.userName}}</p>
            <p>{{item.userPhone}}</p>
          </li>
        </ul>
      </wv-tab>
    </wv-tabs>
    <p class="offer" @click="add()">新增</p>
  </div>
</template>

<script type="text/ecmascript-6">
  import {passengerListInfo, addressListInfo, contactsListInfo} from '../../../../test/unit/http'
  import {Toast} from 'we-vue'
  export default {
    name: 'changyong',
    props: {},
    data() {
      return {
        activeIndex: 0,
        privatedataList: [],
        addressList: [],
        contactsList: []
      };
    },
    methods: {
      getPassengerListInfo(){
        let that = this;
        passengerListInfo({}).then(res => {
          console.log(res);
          if (res.code == 100) {
            that.privatedataList = res.object;
          } else {
            Toast.fail(res.info)
          }
          console.log(that)
        })
      },
      getAddressListInfo(){
        let that = this;
        addressListInfo({}).then(res => {
          console.log(res);
          if (res.code == 100) {
            that.addressList = res.object;
          } else {
            Toast.fail(res.info)
          }
          console.log(that)
        })
      },
      getContactsListInfo(){
        let that = this;
        contactsListInfo({}).then(res => {
          console.log(res);
          if (res.code == 100) {
            that.contactsList = res.object;
          } else {
            Toast.fail(res.info)
          }
          console.log(that);
        })
      },
      showInfo(activeIndex){
        if (activeIndex == 0) {
          this.getPassengerListInfo();
        }
        if (activeIndex == 1) {
          this.getAddressListInfo();
        }
        if (activeIndex == 2) {
          this.getContactsListInfo();
        }
      },
      add(){
        if (this.activeIndex == 1) {
          this.$router.push({path: '/addaddress'})
        }
        if (this.activeIndex == 0) {
          this.$router.push({path: '/addlvke'})
        }
        if (this.activeIndex == 2) {
          this.$router.push({path: '/addperson'})
        }
      },
      goEditLvke(lvke){
        this.$router.push({path: '/addlvke',query:{type:2,privatedataId:lvke.privatedataId}})
      },
      goEditAddress(address){
        this.$router.push({path: '/addaddress',query:{type:2,addressId:address.addressId}})
      },
      goEditContacts(contacts){
        this.$router.push({path: '/addperson',query:{type:2,contactsId:contacts.contactsId}})
      }
    },
    created() {
      let activeIndex = this.$route.query.activeIndex;
      if(this.$myUtils.isNull(activeIndex)){
        activeIndex=this.activeIndex
      }else{
        this.activeIndex=activeIndex;
      }
      this.showInfo(activeIndex);
    },
    components: {}
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .changyong {
    padding-top: 10px;
  }

  .offer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-image: linear-gradient(to left, #4c92ed, #61beec);
    height: 50px;
    line-height: 50px;
    color: #fff;
  }

  .lvkelist {
    text-align: left;
    padding-bottom: 60px;
    li {
      border-bottom: 1px solid #ddd;
      margin: 10px;
      padding-bottom: 10px;
      p:first-child {
        color: #111;
        font-size: 16px;
        margin-bottom: 10px;
        span {
          background-color: #3095f0;
          color: #fff;
          border-radius: 25px;
          padding: 4px 15px;
          font-size: 10px;
          margin-left: 10px;
          vertical-align: text-top;
        }
      }
      p:last-child {
        color: #999;
      }
    }

  }
</style>
